<template>
  <div>
    <div :style="headerFlex">
      <div :style="leftBox">
        <div :style="mark"></div>
        <span :style="leftBoxSpan">签收信息</span>
      </div>
    </div>
    <div v-for="(item, index) in repeatSign"
         :key="index">
      <div :style="headerTitle">
        <div :style="headerSubTitle">
          <span>【重签信息】</span>
          <!-- <span>重签时间：{{ item.signTime }}</span> -->
        </div>
      </div>
      <div class="center"
           :style="{'height': height}">
        <div :style="boxBorder">
          <el-row :gutter="20"
                  :style="descBox">
            <el-col :span="24">
              <description title="">
                <description-item label="申请手机号"
                                  expand
                                  :value="item.reSignMobile"
                                  :span="12" />
                <description-item label="申请时间"
                                  expand
                                  :value="item.reSignApplyAt"
                                  :span="12" />
                <description-item label="申请设备位置"
                                  expand
                                  :value="item.reSignDeviceAddress"
                                  :span="24" />
                <description-item label="申请短信"
                                  expand
                                  :value="item.reSignMessage"
                                  :span="24" />
              </description>
            </el-col>
          </el-row>
          <el-row :gutter="20"
                  :style="descBox">
            <el-col :span="24">
              <description title="">
                <description-item label="重签手机号"
                                  expand
                                  :value="item.signMobile"
                                  :span="12" />
                <description-item label="重签时间"
                                  expand
                                  :value="item.signTime"
                                  :span="12" />
                <description-item label="重签人微信openid"
                                  expand
                                  :value="item.openId"
                                  :span="12" />
                <description-item label="重签手机位置"
                                  expand
                                  :value="item.signAddress"
                                  :span="24" />
                <description-item label="重签设备位置"
                                  expand
                                  :value="item.deviceAddress"
                                  :span="24" />
                <description-item v-if="item.signCode"
                                  label="重签签收码"
                                  expand
                                  :value="item.signCode"
                                  :span="12" />
              </description>
            </el-col>
          </el-row>
          <div :style="goodsProve">
            <CertSignTable :goods="item.goods" />
            <div :style="total">合计：数量 {{item.fromTotalAmount}}件；实签 {{item.toTotalAmount}}件；异常数 {{item.totalSignException}}件</div>
            <div v-if="item.signDesc"
                 :style="explain">签收说明：<span :style="explainSpan">{{item.signDesc || '--'}}</span></div>
            <div :style="attachs">
              <div v-if="item.attachments.length">
                <div>签收图片：</div>
                <span v-for="(itm, indx) in item.attachments"
                      :key="indx">{{ itm.name }}，</span>
              </div>
              <div v-else>
                签收图片：--
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :style="dividerAchieve"></div>
    </div>
    <div :style="headerTitle">
      <div :style="headerSubTitle">
        <span>【签收信息】</span>
        <!-- <span>签收时间：{{ sign.signTime }}</span> -->
      </div>
    </div>
    <div class="center"
         :style="{'height': height}">
      <div :style="boxBorder">
        <el-row :gutter="20"
                :style="descBox">
          <el-col :span="24">
            <description title="">
              <description-item label="签收手机号"
                                expand
                                :value="sign.signMobile"
                                :span="12" />
              <description-item label="签收时间"
                                expand
                                :value="sign.signTime"
                                :span="12" />
              <description-item label="签收人微信openid"
                                expand
                                :value="sign.openId"
                                :span="24" />
              <description-item label="签收手机位置"
                                expand
                                :value="sign.signAddress"
                                :span="24" />
              <description-item label="签收设备位置"
                                expand
                                :value="sign.deviceAddress"
                                :span="24" />
              <description-item v-if="sign.signCode"
                                label="签收码"
                                expand
                                :value="sign.signCode"
                                :span="12" />
            </description>
          </el-col>
        </el-row>
        <div :style="goodsProve">
          <CertSignTable :goods="sign.goods" />
          <div :style="total">合计：数量 {{sign.fromTotalAmount}}件；实签 {{sign.toTotalAmount}}件；异常数 {{sign.totalSignException}}件</div>
          <div v-if="sign.signDesc"
               :style="explain">签收说明：<span :style="explainSpan">{{sign.signDesc || '--'}}</span></div>
          <div :style="attachs">
            <div v-if="sign.attachments.length">
              <span>签收图片：</span>
              <span v-for="(itm, indx) in sign.attachments"
                    :key="indx">{{ itm.name }} </span>
            </div>
            <div v-else>
              签收图片：--
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :style="certTrackLength ? divider : ''"></div>
  </div>
</template>

<script>
import Description from "@views/digitalize/components/desc/Description";
import DescriptionItem from "@views/digitalize/components/desc/DescriptionItem";
// import nrUpload from "@/components/advance/upload/Upload.vue";
import CertSignTable from "./CertSignTable.vue"
// import SignTable from "./SignTable.vue"

export default {
  name: 'CertSign',
  components: { Description, DescriptionItem, CertSignTable },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isLook: true,
      height: ""
    }
  },
  computed: {
    repeatSign () {
      return this.value?.orderReSignResultList || []
    },
    sign () {
      return this.value?.orderSignResult || []
    },
    ereData () {
      return this.value?.certEreData || {}
    },
    certTrackLength () {
      return this.data?.length || []
    },
    descBox () {
      return {
        // margin: '0 0 20px 0',
        // borderBottom: '1px dashed #cccccc'
      }
    },
    leftDesc () {
      return {
        borderBottom: '1px dashed #cccccc'
      }
    },
    tableTop () {
      return {
        paddingTop: '20px'
      }
    },
    total () {
      return {
        paddingTop: '8px',
        fontSize: '14px',
        fontWeight: 400,
        lineHeight: '20px',
        // color: '#666666'
      }
    },
    explain () {
      return {
        paddingTop: '6px',
        fontSize: '14px',
        fontWeight: 400,
        lineHeight: '20px',
        color: '#000',
      }
    },
    explainSpan () {
      return {
        // color: '#666666'
      }
    },
    headerFlex () {
      return {
        displayFlex: true,
        justifyContent: 'space-between',
        padding: '12px 0',
      }
    },
    leftBox () {
      return {
        display: 'flex',
        alignItems: 'center'
      }
    },
    leftBoxSpan () {
      return {
        color: ' #000000',
        fontWeight: 400,
        lineHeight: '21px',
        fontSize: '20px'
      }
    },
    mark () {
      return {
        width: '3px',
        height: '21px',
        backgroundColor: '#eb662b',
        marginRight: '7px'
      }
    },
    boxBorder () {
      return {
        // padding: '20px'
      }
    },
    center () {
      return {
        backgroundColor: '#fafafa',
        borderRadius: '10px'
      }
    },
    headerTitle () {
      return {
        width: '100%',
        height: '45px',
        lineHeight: '45px',
        backgroundColor: '#ebebeb',
        borderRadius: '10px 10px 0px 0px'
      }
    },
    headerSubTitle () {
      return {
        display: 'flex',
        justifyContent: 'space-between',
        padding: '0 20px'
      }
    },
    goodsProve () {
      return {
        padding: "10px"
      }
    },
    divider () {
      return {
        borderBottom: '1px dashed #cccccc',
        // padding: "12px 20",
        margin: "12px"
      }
    },
    dividerAchieve () {
      return {
        borderBottom: '1px solid #cccccc',
        borderColor: '#efefef',
        margin: "12px"
      }
    },
    attachs () {
      return {
        paddingTop: "10px"
      }
    }
  }
}
</script>

<style scoped>
</style>